import React from 'react'
import { Link, withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { Card } from 'antd'
import { FormattedMessage } from 'react-intl'
import { getProgramIntroduction } from '../../../../actions/program'

const gridStyle = {
  width: '33%',
  height: '150',
  fontSize: 20,
  cursor: 'pointer',
  lineHeight: 5,
  textAlign: 'center'
}

const data = [
  {title: '训练营总览', getUrl: programId => `/programs/${programId}/reports/program-overview`},
  {title: '训练营学员作业情况', getUrl: programId => `/programs/${programId}/reports/program-assignments-status`},
  {title: '学员作业完成率概览', getUrl: programId => `/programs/${programId}/reports/program-assignments-finish-report`},
  {title: '客观题统计', getUrl: programId => `/programs/${programId}/reports/basic-quiz-statistic`},
  {title: '调研题统计', getUrl: programId => `/programs/${programId}/reports/survey-quiz-statistic`},
  {title: '训练营学员作业Tag统计', getUrl: programId => `/programs/${programId}/reports/program-assignments-tag-statistic`},
  {title: '训练营作业完成速度统计', getUrl: programId => `/programs/${programId}/reports/program-assignments-finish-speed-report`}
]

class ReportStatisticBody extends React.Component {

  componentDidMount = () => {
    const {programId} = this.props.match.params
    this.props.getProgram(programId)
  }

  render () {
    const {program} = this.props
    return <Card title={program.title}>
      {
        data.map(item => <Link to={item.getUrl(program.id)}>
          <Card.Grid style={gridStyle}>
            <FormattedMessage id={item.title}/>
          </Card.Grid>
        </Link>)
      }
    </Card>
  }
}

const mapStateToProps = ({program}) => ({
  program
})
const mapDispatchToProps = dispatch => ({
  getProgram: (programId) => dispatch(getProgramIntroduction(programId)),
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ReportStatisticBody))
